import React, { Component, Fragment } from 'react';
import { Spin, Row, Col, Card, Icon, Tag, Button } from 'antd';
import { connect } from 'dva';
import styles from './index.less'

class Dashboard extends Component {
  render() {
    const {
      cdnUrl,
    } = this.props;
    return (
      <Fragment>
        <Spin spinning={false} >
          <Card className={styles.DashboardWarn}>
            <Row>
              <Col>
                <a>立即续费</a>
                <Icon type="exclamation-circle" theme="filled" style={{ color: '#FFBF00' }} />
                您的店铺已打烊，客户将无法访问店铺页面，这会影响到正常交易，请及时续费。</Col>
            </Row>
          </Card>
          <Card
            className={styles.DashboardHead}
            bordered={false}
          >
            <Row>
              <Col>
                <div className="left">
                  <img src="" />
                  <p>店铺名称</p>
                  <Tag color="#52C41A">营业中</Tag>
                  <Tag className="test">试用版</Tag>
                  <Tag className="enterprise">企业认证</Tag>
                </div>
                <div className="right"><Button>访问店铺</Button></div>
              </Col>
            </Row>
          </Card>
          <Card
            className={styles.DashboardMonitor}
            bordered={false}
            title="数据监控"
            extra={<p>上次更新 2019-03-14 14:42:39</p>}
          >
            <Row>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_01.png'} />
                待发货订单
                <p>0</p>
                <div className="layer"></div>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_02.png'} />
                待付款订单
                <p>12</p>
                <div className="layer"></div>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_03.png'} />
                待审核评价
                <p>15</p>
                <div className="layer"></div>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_04.png'} />
                维权订单
                <p>12</p>
              </Col>
            </Row>
            <Row>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_05.png'} />
                支付金额 (元)
                <p>13225</p>
                <span>昨日 11025</span>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_06.png'} />
                支付订单数
                <p>354</p>
                <span>昨日 11025</span>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_07.png'} />
                支付人数
                <p>151</p>
                <span>昨日 11025</span>
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_08.png'} />
                访客数
                <p>1222</p>
                <span>昨日 11025</span>
              </Col>
            </Row>
          </Card>
          <Card
            className={styles.DashboardStatis}
            bordered={false}
            title="经营趋势"
            extra={<p>上次更新 2019-03-14 14:42:39</p>}
          ></Card>

          <Card
            className={styles.DashboardShortcut}
            bordered={false}
            title="常用功能"
          >
            <Row>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_11.png'} />
                发布商品
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_12.png'} />
                微页面
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_13.png'} />
                发货管理
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_14.png'} />
                评价审核
              </Col>
            </Row>
            <Row>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_15.png'} />
                维权处理
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_16.png'} />
                客户管理
              </Col>
              <Col span={6}>
                <img src={cdnUrl + '/' + 'xkdnewyun/systemfile/store/summary/icons_17.png'} />
                优惠券
              </Col>
            </Row>
          </Card>
        </Spin>
      </Fragment>
    );
  }
}
export default connect(({ global }) => ({
  cdnUrl: global.oemInfo.cdnUrl,
}))(Dashboard);